<template>
  <div class="videodetail">
    <div class="videoTop">
      <div
        class="hotLink"
        v-if="livePlayback.hotLink"
        @click="$router.push({ path: '/live' })"
      >
        <div
          class="img"
          v-for="(img, i) in livePlayback.hotLink.avatars"
          :key="i"
        >
          <img :src="img" alt="" />
        </div>
        <span class="title">热门直播</span>
      </div>
    </div>
    <!-- 播放按钮 -->
    <div class="palybg" @click="pause" v-show="playShow">
      <img src="../assets/image/home/palybg.png" alt="" />
    </div>
    <!-- 右边评论,关注,购物车信息 -->
    <div class="right_bar" v-if="livePlayback.itemExplainList">
      <div class="right-bar-avatar">
        <div class="right-bar-item">
          <img
            :src="livePlayback.itemExplainList[0].actorInfo.avatar"
            alt=""
            class="right-bar-actor-avatar"
          />
          <!-- 关注 -->
          <div
            class="attention"
            @click="addfollow"
            :style="{
              backgroundColor: followObj ? '#ffdbe2' : '#f46',
            }"
          >
            <span :style="{ color: followObj ? '#f46' : '#fff' }">{{
              followObj ? "已关注" : "关注"
            }}</span>
          </div>
        </div>
        <div class="right-bar-item">
          <img src="../assets/image/home/xingxing.png" alt="" />
          <span>收藏</span>
        </div>
        <div class="right-bar-item" @click="showPopup = true">
          <img src="../assets/image/home/pinglun.png" alt="" />
          <span>{{ comments.length ? `${comments.length}` : "评价 " }}</span>
        </div>
        <div class="right-bar-item">
          <img src="../assets/image/home/gouwuce.png" alt="" />
          <span>购物车</span>
        </div>
      </div>
    </div>

    <!-- 评论弹出层 -->
    <van-popup
      v-model="showPopup"
      position="bottom"
      :style="{ height: '60%' }"
      :closeable="true"
    >
      <!-- 购买评价 -->
      <div class="showPopup-top" style="color: #999">
        <span>购买评价 {{ comments.length }}</span>
      </div>
      <!-- 用户评论 -->
      <div
        class="comment-list-item"
        v-for="item in comments"
        :key="item.commentId"
      >
        <div class="item-user">
          <div class="item-avatar-container">
            <img
              :src="item.avatar"
              alt=""
              width="32"
              height="32"
              style="border-radius: 50%"
            />
          </div>
          <div class="item-name-container">
            <p style="font-size: 14px">{{ item.userName }}</p>
            <p style="margin-top: 2.5px">{{ item.time }}</p>
          </div>
        </div>
        <!-- 评论内容 -->
        <div class="item-comment" style="color: #fff; font-size: 14px">
          {{ item.content }}
        </div>
        <div class="item-line"></div>
      </div>
    </van-popup>
    <!-- 底部详情 -->
    <div class="mask-bottom" v-if="livePlayback.itemExplainList">
      <div class="user-info addbottomTop">
        <div class="user-name">{{ itemExplainList.actorInfo.name }}</div>
        <div class="user-content">
          <div class="user-msg">
            {{ itemExplainList.actorInfo.height }}cm
            {{ itemExplainList.actorInfo.weight }}kg
          </div>
          <div class="user-divide">|</div>
          <div class="user-msg">{{ itemExplainList.actorInfo.fansCount }}</div>
        </div>
      </div>

      <div
        class="bottom-bar-container addbottomUp"
        v-if="livePlayback.itemExplainList"
        @click="GoodSdetails(itemInfo)"
      >
        <div class="bottom-bar">
          <img
            :src="itemInfo.cover"
            alt=""
            width="48px"
            height="48px"
            class="goods-img"
          />
          <div class="goods-info">
            <div class="goods-title">{{ itemInfo.title }}</div>
            <div class="goods-price">
              <div class="price-icon">待秒杀</div>
              <div class="discountPrice">￥{{ itemInfo.discountPrice }}</div>
            </div>
          </div>
          <div class="shopping-btn">{{ itemExplainList.title }}</div>
        </div>
      </div>
    </div>

    <div v-if="livePlayback.itemExplainList">
      <video
        loop
        ref="video"
        :controls="!playShow"
        :src="itemExplainList.videoInfo.url"
      ></video>
    </div>
  </div>
</template>

<script>
import _ from "lodash";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      livePlayback: {}, //直播回放数据
      playShow: true, //播放按钮显示隐藏

      showPopup: false, //评论弹出层
      comments: [], //评论数据
    };
  },
  mounted() {},
  computed: {
    ...mapState("m_user", ["followList", "token"]),
    followObj() {
      return this.followList.find(
        (item) =>
          item.name === this.livePlayback.itemExplainList[0].actorInfo.name
      );
    },
    itemExplainList() {
      return this.livePlayback.itemExplainList[0];
    },
    itemInfo() {
      return this.itemExplainList.itemInfo;
    },
  },
  watch: {},
  methods: {
    ...mapMutations("m_user", ["addfollowList"]),
    // 暂停播放
    pause() {
      let video = this.$refs.video;
      if (video.paused) {
        video.play();
        this.playShow = false;
      } else {
        this.playShow = false;
      }
    },
    // 跳转购物车
    GoodSdetails(item) {
      this.$router.push({
        path: "/goodsdetails",
        query: {
          id: item.itemId,
        },
      });
    },
    // 获取直播回放详情
    async accessToLivePlaybackForDetails() {
      // itemIdUrl 商品id
      // actorIdUrl	主播id
      const {
        data: { data: res },
      } = await this.axios.get(
        `https://apis.netstart.cn/mogujie/video/detail?itemId=${this.$route.query.itemIdUrl}&actorId=${this.$route.query.actorIdUrl}`
      );
      res.itemExplainList.forEach((item) => {
        if (item.comments) {
          item.comments.forEach((goods) => {
            this.comments.push(goods);
          });
        }
      });
      console.log(res);
      this.livePlayback = res;
    },
    // 关注用户
    addfollow() {
      if (this.token) {
        console.log("登录了");
        this.addfollowList(this.livePlayback.itemExplainList[0].actorInfo);
        console.log("关注成功");
      }
      if (!this.token && !this.followObj) {
        console.log("没有登录");
        this.$router.push("/login");
      }
    },
  },
  mounted() {
    console.log(this.token);
  },
  created() {
    this.accessToLivePlaybackForDetails();
  },
};
</script>

<style lang="scss" scoped>
.videodetail {
  .videoTop {
    width: 100%;
    height: 130px;
    .hotLink {
      display: flex;
      align-items: center;
      width: 132px;
      height: 37px;
      background-color: rgba(0, 0, 0, 0.5);
      position: relative;
      left: 10px;
      top: 10px;
      border-radius: 20px;

      .title {
        font-size: 12px;
        color: #fff;
        position: absolute;
        right: 15px;
      }
    }
    .img {
      width: 30px;
      height: 30px;
      border: 1px solid #fff;
      border-radius: 50%;
      position: absolute;
      &:nth-child(1) {
        top: 2px;
        left: 0;
      }

      &:nth-child(2) {
        top: 2px;
        left: 15px;
      }

      &:nth-child(3) {
        top: 2px;
        left: 30px;
      }
      img {
        width: 100%;
        border-radius: 50%;
      }
    }
  }
  .mask-bottom {
    position: absolute;
    bottom: 60px;
    width: 100%;
    height: 160px;
    .user-info {
      position: absolute;
      bottom: 0;
      left: 20px;

      .user-name {
        color: #fff;
        font-size: 18px;
      }
      .user-content {
        margin-top: 8px;
        display: flex;
        font-size: 12px;
        color: hsla(0, 0%, 100%, 0.6);
        .user-msg {
        }
        .user-divide {
          margin: 0 8px;
        }
      }
    }
    .bottom-bar-container {
      position: absolute;
      width: 100%;
      // bottom: 10px;
      bottom: -130px;
      .bottom-bar {
        position: absolute;
        bottom: 0;
        left: 15px;
        right: 15px;
        height: 61px;
        border-radius: 4px;
        background-color: rgba(0, 0, 0, 0.3);
        overflow: hidden;
        display: flex;
        align-items: center;
        .goods-img {
          margin: 0 10px;
          object-fit: cover;
        }
        .goods-info {
          width: 210px;
          display: flex;
          flex-direction: column;
          .goods-title {
            font-size: 14px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #fff;
          }
          .goods-price {
            margin-top: 10px;
            display: flex;
            .price-icon {
              margin-right: 5px;
              width: 38px;
              height: 15px;
              line-height: 15px;
              text-align: center;
              font-size: 9px;
              color: #fff;
              background: -webkit-linear-gradient(300deg, #fb872c, #fc4441);
              background: linear-gradient(150deg, #fb872c, #fc4441);
              border-radius: 2px;
            }
            .discountPrice {
              font-size: 17px;
              font-weight: 600;
              color: #fa4e82;
            }
          }
        }
        .shopping-btn {
          width: 72px;
          height: 26px;
          font-size: 12px;
          color: #fff;
          border-radius: 20px;
          background-color: #f46;
          line-height: 26px;
          text-align: center;
        }
      }
    }
  }
  // 播放按钮样式
  .palybg {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    img {
      width: 100%;
    }
  }
  .footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 50px;
    z-index: 11;
    display: flex;
    align-items: center;
    width: 100%;
    .pause-img {
      width: 17px;
      height: 17px;
      margin-left: 10px;
    }
    .footer-item {
      width: 100%;
      margin-left: 10px;
    }
    .time {
      color: #fff;
      margin-left: 10px;
      margin-right: 10px;
    }
  }
  //  底部背景
  .bottom-bg {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4.67rem;
    background-image: -webkit-linear-gradient(
      top,
      transparent,
      rgba(0, 0, 0, 0.02) 18%,
      rgba(0, 0, 0, 0.6)
    );
    background-image: linear-gradient(
      180deg,
      transparent,
      rgba(0, 0, 0, 0.02) 18%,
      rgba(0, 0, 0, 0.6)
    );
    z-index: 10;
  }
  .right_bar {
    height: 322px;
    //  background-color: skyblue;
    position: absolute;
    right: 0;
    bottom: 110px;
    width: 70px;
    z-index: 40;
    .right-bar-avatar {
      .attention {
        position: absolute;
        bottom: -10px;
        right: 0px;
        left: 15px;
        width: 40px;
        height: 18px;
        // background-color: #f46;
        border-radius: 9px;
        text-align: center;
        line-height: 18px;
      }
      .right-bar-actor-avatar {
        width: 45px;
        height: 45px;
        border-radius: 50%;
      }
    }
    .right-bar-item {
      margin-top: 16px;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      position: relative;
      img {
        width: 40px;
        height: 40px;
      }
    }
  }
  video {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
  }
}
// 评论层样式
::v-deep .van-popup {
  background-color: rgba(0, 0, 0, 0.7);
}
.showPopup-top {
  height: 45px;
  line-height: 45px;
  span {
    margin-left: 10px;
    font-size: 14px;
  }
}
.comment-list-item {
  width: 100%;
  height: auto;
  background-color: transparent;
  overflow: hidden;

  .item-user {
    display: flex;
    font-size: 12px;
    color: #999;
    align-items: center;
    margin-top: 13px;
    .item-avatar-container,
    .item-name-container {
      margin-left: 12px;
    }
    .item-name-container {
    }
  }
  .item-comment {
    margin: 4px 12px 30px 56.5px;
    white-space: normal;
    text-overflow: ellipsis;
  }
  .item-line {
    margin-left: 56.5px;
    height: 0.5px;
    background-color: #4b4b4b;
  }
}
.addbottomTop {
  animation: bottomTop 0.8s 1 linear forwards;
  animation-delay: 5s;
  will-change: bottom;
}
.addbottomUp {
  animation: bottomUp 0.8s 1 linear forwards;
  animation-delay: 5s;
  will-change: bottom;
}
@keyframes bottomTop {
  0% {
    bottom: 0px;
  }
  100% {
    bottom: 80px;
  }
}
@keyframes bottomUp {
  0% {
    bottom: -61px;
  }
  100% {
    bottom: 10px;
  }
}
</style>